<template>
  <view class="bg-[var(--page-bg-color)] min-h-[100vh] pt-60rpx" :style="themeColor()">
    <view v-for="(item, index) in [memberInfo]" :key="index"
      class="sidebar-margin card-template  py-0 mb-[var(--top-m)]">
      <view>
        <view class="flex items-center">
          <view class="w-[60rpx] h-[60rpx]">
            <image v-if="item.decodeFields[1].value == 0"
              :src="'http://files.meton.vip/4e5bf58679eb9357b2fe51253bd237964fa4f851eed3ee3a80c219996a34e54a.png'"
              class="w-[60rpx] h-[60rpx]"></image>
            <image v-else
              :src="'http://files.meton.vip/636a0ab14592275f16f31842e69c58aaacd01a3b29a982e7ea1bd204ea7f34f0.png'"
              class="w-[60rpx] h-[60rpx]"></image>
          </view>
          <view class="flex-1  flex items-center ml-[20rpx]  box-border py-[30rpx] border-0">
            <view class="flex-1">
              <view class="text-[26rpx] text-[#333]">{{ item.decodeFields[0].value }}{{ item.description ? ' - '
                +
                item.description : '' }}</view>
              <view class="text-[24rpx] text-[var(--text-color-light9)] mt-[16rpx]">
                {{ item.decodeFields[1].value == 1 ? '男' : '女' }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-for="(item, index) in zizhuzhencha.decodeFields" :key="index">
      <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] ">
        <view
          class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
          <text class="text-[30rpx] font-500">
            {{ item.title }}
          </text>

        </view>
        <view class="flex flex-wrap pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
          <text
            class="px-[14rpx] flex-shrink-0  box-border ml-[20rpx] min-w-[160rpx]  h-[60rpx] text-center leading-[56rpx] text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] text-[#333] "
            :class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': state.optionName == items.label, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': state.optionName != items.label }"
            v-for="(items, indexs) in item.props.options" :key="indexs" @click="childDetails(item, items, indexs)">{{
              items.label
            }}</text>
        </view>
      </view>
      <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] " v-if="item.childrenList">
        <view class="flex flex-wrap pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>
          <text
            class="px-[14rpx] flex-shrink-0  box-border ml-[20rpx] min-w-[160rpx]  h-[60rpx] text-center leading-[56rpx] text-[24rpx] border-[2rpx] border-solid !rounded-[100rpx] text-[#333] "
            :class="{ 'bg-[var(--primary-color-light)] font-500 text-[var(--primary-color)] border-[var(--primary-color)]': state.childrenName == items.label, 'border-[var(--temp-bg)]  bg-[var(--temp-bg)]': state.childrenName != items.label }"
            v-for="(items, indexs) in item.childrenList" @click="selectChildren(items, indexs)" :key="indexs">{{
              items.label
            }}</text>
        </view>
      </view>
      <view class="bg-[#fff] sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] " v-if="state.imgUrl">
        <view
          class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid">
          <text class="text-[30rpx] font-500">
            症状图
          </text>

        </view>
        <view class="flex  pt-[20rpx] pb-[24rpx]" @touchmove.prevent.stop>

          <image :src="state.imgUrl" />
        </view>
      </view>
    </view>

    <view class="w-full footer">
      <view class="py-[var(--top-m)] px-[var(--sidebar-m)] footer w-full fixed bottom-0 left-0 right-0 box-border">
        <button hover-class="none"
          class="primary-btn-bg text-[#fff] h-[80rpx] leading-[80rpx] rounded-[100rpx] text-[26rpx] font-500"
          @click="addNew">生成调理单</button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { t } from '@/locale'
import { redirect, img } from '@/utils/common';
import { createMemberBabyRecordList } from './../api/index'

import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
const state = reactive({
  optionIndex: undefined, //选择的分类ID
  optionName: undefined, //大分类名称
  childrenIndex: undefined, //二级分类选择的index
  childrenName: undefined, //小分类名称
  childrenList: undefined, //二级分类
  url: '', //生成的要跳转的链接
  imgUrl: '', //

});
const childDetails = (item: { childrenList: any; }, items: { label: undefined; children: any; }, index: any) => {
  zizhuzhencha.value.decodeFields.forEach((ele: { childrenList: undefined; }) => {
    ele.childrenList = undefined;
  });
  state.optionIndex = index;
  state.optionName = items.label; //大分类名称
  state.childrenIndex = undefined;
  state.childrenName = undefined;
  state.url = '';
  state.imgUrl = '';

  item.childrenList = items.children;
};
const selectChildren = (item: { label: undefined; url: string; imgUrl: string; }, index: any) => {
  state.childrenIndex = index;
  state.childrenName = item.label;
  state.url = item.url;
  state.imgUrl = item.imgUrl;
};

const memberInfo = ref<any>({})
const zizhuzhencha = ref<any>({})


const decodeFields = (fields: any[]) => {
  const rule: any[] = [];
  fields.forEach((item: string) => {
    rule.push(JSON.parse(item));
  });
  return rule;
};

let wap_member_id = uni.getStorageSync('wap_member_id');

const addNew = () => {
  if (state.url != '') {
    uni.showModal({
      title: '提示',
      content: '本调理单仅为辅助调理使用,如宝宝症状严重,请及时就医,以免耽误病情',
      success: function (res) {
        if (res.confirm) {
          const params = {
            userId: wap_member_id,
            babyId: memberInfo.value.id,
            bpmId: Number(state.url),//调理单详情ID，
            type: 3,
            imgUrl: state.imgUrl,
            optionName: state.optionName, //一级症状
            childrenName: state.childrenName, //二级症状
            status: 0
          }
          createMemberBabyRecordList(params).then((res: any) => {
            if (res.code == 0) {
              redirect({ url: `/addon/ertui/pages/diy-inspect-details`, param: { id: res.data }, mode: 'redirectTo' })

            }
          })
        } else if (res.cancel) {
        }
      },
    });
  } else {
    uni.showToast({
      icon: 'none',
      title: '请先选择症状',
    });
  }
};

const getConfig = () => {
  memberInfo.value = uni.getStorageSync('memberInfo')
  memberInfo.value.decodeFields = decodeFields(memberInfo.value.fields)
  zizhuzhencha.value = uni.getStorageSync('zizhuzhencha')
  zizhuzhencha.value.decodeFields = decodeFields(zizhuzhencha.value.fields)
};

onLoad(async () => {

  await getConfig();
});
</script>

<style lang="scss" scoped>
:deep(.type-class .u-popup .u-transition) {
  top: 86rpx !important;
}
</style>
